<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>气泡图</title>
</head>
<body>
    <div id="app" style="width: 600; height: 400;"></div>
<script type="module">
    import { render } from './index.js';
    const app = document.getElementById('app')
    const bubbles = render({})
    bubbles.forEach(ele => {
        const div = document.createElement('div')
        app.appendChild(div)
        div.style.cssText = `
            position: absolute;
            left: ${ele.left}px;
            top: ${ele.top}px;
            width: ${ele.radius}px;
            height: ${ele.radius}px;
            margin: ${ ele.radius / -2 }px ${ ele.radius / -2 }px 0 0;
            background: ${ele.color};
            opacity: .7;
            border-radius: ${ele.radius}px;
        `
    });
</script>
</body>
</html>